<template>
    <div class="user">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-row>
                <el-col :span="24">
                    <el-input placeholder="请输入内容" class="search-input" v-model="query" @keydown.native.enter="initList">
                        <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
                    </el-input>
                    <el-button type="success" plain @click="addDialogFormVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
             <el-table
                :data="userList"
                border
                style="width: 100%">
                <el-table-column
                type="index"
                width="50">
                </el-table-column>
                <el-table-column
                prop="username"
                label="姓名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="email"
                label="邮箱"
                width="180">
                </el-table-column>
                <el-table-column
                prop="mobile"
                label="电话">
                </el-table-column>
                <el-table-column label="用户状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state" @change="changeUserState(scope.row)"></el-switch>
                </template> 
                </el-table-column> 
                 <el-table-column label="操作">
                   
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
                    <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="editEditDialog(scope.row)"></el-button>
                    <el-button size="mini" type="warning" plain icon="el-icon-check" @click="aliasEditDialog(scope.row)"></el-button>
                </template>
            </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
            <!-- 添加用户 -->
            <el-dialog title="添加用户" :visible.sync="addDialogFormVisible" >
            <el-form :model="addForm" label-width="80px" :rules="rules" ref="addUserForm">
                <el-form-item label="用户名" prop='username'>
                <el-input v-model="addForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
            </div>
            </el-dialog>

            <!-- 编辑用户 -->
            <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible" >
            <el-form :model="editForm" label-width="80px" :rules="rules" ref="editUserForm">
                <el-form-item label="用户名" prop='username'>
                <el-input v-model="editForm.username" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
            </div>
            </el-dialog>

            <!-- 分配角色 -->
            <el-dialog title="分配角色" :visible.sync="aliasDialogFormVisible" >
            <el-form :model="aliasForm" label-width="120px" >
                <el-form-item label="当前的用户" prop='username'>
                <el-tag type="info">{{aliasForm.username}}</el-tag>
                </el-form-item>
                <el-form-item label="请选择角色">
                <el-select v-model="roleId" placeholder="请选择角色">
                <el-option v-for="(role,index) in roleList" :key="index" :label="role.roleName" :value="role.id"></el-option>
                </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="aliasUserSubmit()">确 定</el-button>
            </div>
            </el-dialog>
            
        </el-row>
    </div>
</template>
<script>
import {getUserList,changeUserState,addUser,getUserId,editUser,deleteUser,getRoleList,AssignRoles} from '@/api'
export default {
    data(){
        return{
            userList: [],
            query:'',
            total:1,
            pagesize:10,
            pagenum:1,
            addDialogFormVisible:false,
            editDialogFormVisible:false,
            aliasDialogFormVisible:false,
            roleList:[],
            roleId:'',
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''
            },
            editForm:{
                username:'',
                password:'',
                email:'',
                mobile:'',
                id:0
            },
            aliasForm:{},
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                ],
                mobile: [
                    { required: true, message: '电话不能为空' }
                ]
            }
        }
    },
    created(){
        this.initList()
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.initList()
      },
    //   初始化表格数据
      initList(){
        getUserList({params:{query:this.query,pagenum:this.pagenum,pagesize:this.pagesize}}).then(res => {
            // console.log(res)
            this.userList = res.data.users
            this.total = res.data.total
            })
        },
        // 修改用户状态
        changeUserState(row){
            // console.log(row)
            changeUserState({uId:row.id,type:row.mg_state}).then(res =>{
                // console.log(res)
                if(res.meta.status === 200) {
                    this.$message({
                        message: res.meta.msg,
                        type: 'success'
                    });
                } else {
                     this.$message({
                        message: res.meta.msg,
                        type: 'error'
                    });
                }
            })
        },
        // 添加用户
        addUserSubmit(formName){
            this.$refs[formName].validate(valide => {
                if(valide) {
                     addUser(this.addForm).then(res => {
                        // console.log(res)
                        if(res.meta.status === 201) {
                            this.$message({
                                type:'success',
                                message:'创建用户成功'
                            })
                        } 
                        this.addDialogFormVisible = false;
                        this.initList()
                    })
                }
            })
        },

        // 显示编辑用户
        showEditDialog(row){
            // console.log(row)
            getUserId(row.id).then(res => {
                // console.log(res)
                if(res.meta.status === 200) {
                    this.editDialogFormVisible=true
                    this.editForm.username = res.data.username;
                    this.editForm.mobile = res.data.mobile
                    this.editForm.email = res.data.email;
                    this.editForm.id = res.data.id

                }
            })
        },
        // 编辑用户
        editUserSubmit(formName){
            this.$refs[formName].validate(vaild => {
                if(vaild){
                    editUser(this.editForm).then(res => {
                        // console.log(res)
                        if(res.meta.status === 200) {
                            this.$message({
                                type:'success',
                                message:'编辑成功'
                            })
                        }
                        this.editDialogFormVisible=false;
                        this.initList()
                    })
                }
            })
        },
        // 删除用户
        editEditDialog(row){
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteUser(row.id).then(res => {
                        if(res.meta.status === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        this.initList()
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 分配角色
        aliasEditDialog(row){
            this.aliasForm=row
            this.aliasDialogFormVisible=true
            getRoleList().then(res => {
                // console.log(res)
                if(res.meta.status === 200) {
                    this.roleList = res.data
                }
            })
        },
        aliasUserSubmit(){
            AssignRoles({id:this.aliasForm.id,rid:this.roleId}).then(res => {
                // console.log(res)
                if(res.meta.status === 200) {
                    this.$message({
                        type:'success',
                        message:'设置角色成功'
                    })
                }
                this.aliasDialogFormVisible = false;

            })
        }
    }
    
}
</script>
<style  scoped>
.user .search-input {
    width: 300px;
}
.el-col-24{
    padding-bottom: 10px
}
.page {
    padding: 5px 0;
    background-color: #d3dce6;
    margin-top: 20px
}

</style>


